<template>
  <div>
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <el-col :md="4" :lg="4">
          <p>申报名称</p>
          <el-input v-model="Api_GET_ClubDuanExamHostedListQO.Filter" placeholder="请输入申报名称" size="mini" clearable @change="gettablelist()" />
        </el-col>
        <el-col :span="6">
          <p>考试时间</p>
          <el-date-picker
            v-model="qoDate"
            size="mini"
            style="width: 100%"
            type="daterange"
            range-separator="至"
            start-placeholder="考试开始日期"
            end-placeholder="考试结束日期"
            value-format="yyyy-MM-dd"
            @change="changeAttendance"
          />
        </el-col>
        <el-col :md="4" :lg="4">
          <p>考官</p>
          <el-input v-model="Api_GET_ClubDuanExamHostedListQO.OfficialName" placeholder="请输入考官名称" size="mini" clearable @change="gettablelist()" />
        </el-col>
        <el-col :md="4" :lg="4">
          <el-button type="primary" style="margin-top:25px" size="mini" @click="gettablelist()">筛选</el-button>
          <el-button type="warning" size="mini" @click="reset()">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top:15px">
      <el-table v-loading="tableLoading" class="gl_table_noBorder" size="mini" :data="tableData">
        <el-table-column label="序号" type="index" align="center" width="55" />
        <el-table-column label="申报名称" prop="request.name" min-width="170" />
        <el-table-column label="考试时间" min-width="170">
          <template slot-scope="{ row }">
            <span v-if="row.request.startTime">
              {{ row.request.startTime | FormatDate('yyyy-MM-dd') }}
            </span>至
            <span v-if="row.request.endTime">
              {{ row.request.endTime | FormatDate('yyyy-MM-dd') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="考试地点" prop="request.address" min-width="170" />
        <el-table-column label="考官" prop="request.officials" min-width="150">
          <template slot-scope="{ row }">
            <span v-for="(item,index) in row.request.officials" :key="index">
              {{ item.name }} {{ row.request.officials.length > 0 ? row.request.officials.length - 1 === index ? '': '/' : '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="{ row }">
            <!-- <el-button size="mini" type="text" @click="topersonal(row.id)">详情</el-button>
            <el-button size="mini" type="text" @click="toOrganization(row.id)">可参报机构</el-button>
            <el-button size="mini" type="text" @click="toaudit(row.id)">考试审核</el-button>
            <el-button size="mini" type="text" @click="toCheckList(row)">查看名单</el-button>
            <el-button size="mini" type="text" @click="toScore(row.id)">成绩录入</el-button>-->
            <!-- 更多 -->
            <el-button size="mini" type="text">
              <el-dropdown trigger="click">
                <span class="gl_color_primary" style="font-size: 12px;">
                  更多<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in BtnList" :key="item.code">
                    <div class="dropdown_item" @click="handleCommand(item.code, row.id, row.request.name)">{{ item.name }}</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <entryTime ref="entryTime" />
    </div>
    <!-- 分页 -->
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubDuanExamHostedListQO.Page"
        :page-size="Api_GET_ClubDuanExamHostedListQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { api_GET_ClubDuanExamHostedList } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubDuanExamHostedListQO } from '@/lib/form/hall/swaggerForm';

import entryTime from './entryTime.vue';
export default {
  components: { entryTime },
  data() {
    return {
      qoDate: [],
      tableLoading: false,
      tableData: [],
      totalPage: 0,
      Api_GET_ClubDuanExamHostedListQO: new Api_GET_ClubDuanExamHostedListQO(), // 参报考试列表
      BtnList: [
        {
          code: 'detail',
          name: '详情',
          isShow: true
        },
        {
          code: 'organ',
          name: '可参报机构',
          isShow: true
        },
        {
          code: 'examine',
          name: '考试审核',
          isShow: true
        },
        {
          code: 'check',
          name: '查看名单',
          isShow: true
        },
        {
          code: 'score',
          name: '成绩录入',
          isShow: true
        },
        {
          code: 'look',
          name: '成绩查看',
          isShow: true
        }
      ]
    };
  },
  created() {
    this.gettablelist();
  },
  methods: {
    // 获取申报考试列表
    gettablelist(page) {
      // this.Api_GET_ClubDuanExamHostedListQO.OfficialName = null; // type: string
      this.Api_GET_ClubDuanExamHostedListQO.IncludeOfficials = true; // type: boolean
      this.Api_GET_ClubDuanExamHostedListQO.IncludeRequest = true; // type: boolean
      this.Api_GET_ClubDuanExamHostedListQO.IncludeDuans = true; // type: boolean
      this.Api_GET_ClubDuanExamHostedListQO.IncludeProvince = true; // type: boolean
      this.Api_GET_ClubDuanExamHostedListQO.IncludeCity = true; // type: boolean
      this.Api_GET_ClubDuanExamHostedListQO.IncludeCounty = true; // type: boolean
      this.Api_GET_ClubDuanExamHostedListQO.IncludeRequestDuans = true; // type: boolean
      // this.Api_GET_ClubDuanExamHostedListQO.IncludeParticipatingUnits = false; // type: boolean
      // this.Api_GET_ClubDuanExamHostedListQO.Filter = null; // type: string
      // this.Api_GET_ClubDuanExamHostedListQO.MaxCreationTime = null; // type: string
      this.tableLoading = true;
      this.Api_GET_ClubDuanExamHostedListQO.Sorting = 'creationTime DESC';
      this.Api_GET_ClubDuanExamHostedListQO.Page = page || 1;
      this.Api_GET_ClubDuanExamHostedListQO.SkipCount = (this.Api_GET_ClubDuanExamHostedListQO.Page - 1) * this.Api_GET_ClubDuanExamHostedListQO.MaxResultCount;
      console.log(this.Api_GET_ClubDuanExamHostedListQO);
      api_GET_ClubDuanExamHostedList(this.Api_GET_ClubDuanExamHostedListQO).then(res => {
        this.totalPage = res.totalCount;
        console.log(res);
        this.tableData = res.items;
        this.tableLoading = false;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 切换考试日期
    changeAttendance (val) {
      const _start = val ? val[0] + ' 00:00:00' : null;
      const _end = val ? val[1] + ' 23:59:59' : null;
      console.log(_start, _end);
      this.Api_GET_ClubDuanExamHostedListQO.StartTime = _start; // type: string
      this.Api_GET_ClubDuanExamHostedListQO.EndTime = _end; // type: string
      this.gettablelist();
    },
    // // 跳转申报考试详情
    // topersonal(id) {
    //   this.$router.push({ name: 'ExamDetail', query: { examId: id, type: 'declare' }});
    // },
    // // 跳转可参报机构
    // toOrganization(id) {
    //   this.$router.push({ name: 'Organization', query: { id: id, type: 'declare' }});
    // },
    // // 跳转考试审核
    // toaudit(id) {
    //   this.$router.push({ name: 'Auditlist', query: { id: id, type: 'declare' }});
    // },
    // // 跳转查看名单
    // toCheckList(row) {
    //   this.$router.push({ name: 'Checklist', query: { id: id, type: 'declare' }});
    // },
    // // 跳转成绩录入
    // toScore(id) {
    //   this.$router.push({ name: 'ScoreEntry', query: { id: id, type: 'declare' }});
    // },
    // 跳转成绩录入时间
    openDialog() {
      this.$refs.entryTime.dialogVisible = true;
    },
    // 点击更多
    handleCommand(code, id, names) {
      let name = '';
      let query = {};
      switch (code) {
        // 详情
        case 'detail':
          name = 'ExamDetail';
          query = { examId: id, type: 'declare' };
          break;
        // 可参报机构
        case 'organ':
          name = 'Organization';
          query = { id: id, type: 'declare' };
          break;
        // 考试审核
        case 'examine':
          name = 'Auditlist';
          query = { id: id, type: 'declare' };
          break;
        // 查看名单
        case 'check':
          name = 'Checklist';
          query = { id: id, type: 'declare' };
          break;
        // 成绩录入
        case 'score':
          name = 'ScoreEntry';
          query = { id: id, type: 'declare' };
          break;
        // 成绩查看
        case 'look':
          name = 'ViewScore';
          query = { id: id, type: 'declare', name: names };
          break;
        default:
          break;
      }
      if (!name) return;
      this.$router.push({
        name: name,
        query: query
      });
    },
    // 分页按钮
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubDuanExamHostedListQO.MaxResultCount = MaxResultCount;
      this.gettablelist();
    },
    pageIndexChange(currentPage) {
      this.gettablelist(currentPage);
    },
    // 重置按钮
    reset () {
      this.Api_GET_ClubDuanExamHostedListQO = new Api_GET_ClubDuanExamHostedListQO();
      this.qoDate = [];
      this.gettablelist();
    }
  }

};
</script>

<style scoped>
.dropdown_item {
  margin: 0 -20px;
  padding: 0 20px;
}
</style>
